<template>
  <div class="ticket" v-waterMarder="'这是水印'">
    <el-button @click="importFile">导入文件</el-button>
    <el-button @click="exportFile">导出文件</el-button>
    <input
      type="file"
      ref="inpInfo"
      multiple
      accept=".xlsx"
      @change="upLoadFile"
      style="display: none"
    />
    <el-table
      ref="tableRef"
      row-key="date"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="date"
        label="日期"
        sortable
        width="180"
        column-key="date"
        :filters="[
          { text: '2016-05-01', value: '2016-05-01' },
          { text: '2016-05-02', value: '2016-05-02' },
          { text: '2016-05-03', value: '2016-05-03' },
          { text: '2016-05-04', value: '2016-05-04' },
        ]"
        :filter-method="filterHandler"
      />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="address" label="地址" :formatter="formatter" />

      <el-table-column
        prop="tag"
        label="标签"
        width="100"
        :filters="[
          { text: 'Home', value: 'Home' },
          { text: 'Office', value: 'Office' },
        ]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template #default="scope">
          <el-tag
            :type="scope.row.tag === 'Home' ? '' : 'success'"
            disable-transitions
            >{{ scope.row.tag }}</el-tag
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from "vue";
import * as XLSX from "xlsx";

const tableRef = ref();
const inpInfo = ref();

const tableData = ref([
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    tag: "Home",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    tag: "Office",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    tag: "Home",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    tag: "Office",
  },
]);

// 导出表格数据
const exportFile = () => {
  const data = [];
  tableData.value.forEach((item) => {
    data.push({
      日期: item.date,
      姓名: item.name,
      地址: item.address,
      标签: item.tag,
    });
  });

  // 将data数据转换成表格类型的数据(A1~D5)
  const ws = XLSX.utils.json_to_sheet(data);
  // console.log(ws);
  //设置表格的列宽 单位：字符
  ws["!cols"] = [{ wch: 10 }, { wch: 30 }, { wch: 25 }, { wch: 20 }];
  // 新建book
  const wb = XLSX.utils.book_new();
  // 生成xlsx文件(book,sheet数据，sheet命名) sheet：表格
  // 白话：将转换过的数据生成并写到规定好尺寸的表格中
  // 并给文件写个名字   列表导入实例.xlsx
  XLSX.utils.book_append_sheet(wb, ws, "数据详情");
  XLSX.writeFile(wb, "列表导入实例.xlsx");
};

// 文件上传事件
const upLoadFile = (e) => {
  // 获取到文件的基本信息
  // 如果上传多文件的时候  需要使用循环对文件处理
  let file = e.target.files[0];
  // FileReader  文件API(用于读取文件)  提供了读取文件的方法和包含读取结果的事件模型
  // 三个步骤：1.创建FileReader实例 2.读取文件 3.处理文件读取事件(完成  中断 错误等...)
  const fileReader = new FileReader();
  // 为实例的onload  添加事件
  fileReader.onload = (event) => {
    // 取到目标事件结果
    const { result } = event.target;
    // XLSX  使用二进制读取目标结果
    const workList = XLSX.read(result, { type: "binary" });
    // console.log(workList);
    let data = [];
    // 利用for...in  循环  将读取到的workList  从表格数据转换为json数据
    for (let sheet in workList.Sheets) {
      data = data.concat(XLSX.utils.sheet_to_json(workList.Sheets[sheet]));
    }
    let arr = [];
    // 将转换数据 的 属性改为 表格中需要的字段  并添加到表格数据中
    data.forEach((item) => {
      arr.push({
        date: item["日期"],
        name: item["姓名"],
        address: item["地址"],
        tag: item["标签"],
      });
    });
    tableData.value = tableData.value.concat(arr);
  };
  fileReader.readAsBinaryString(file);
};
// 文件导出
const importFile = () => {
  inpInfo.value.click();
};
</script>

<style scoped>
.ticket {
  width: 100%;
  height: 100%;
}
</style>